<template>
  <LoadingGroup :error="error" :pending="pending" :refresh="refresh">
    <div class="search">
      <UiTab>
        <UiTabItem
          v-for="(item, index) in options"
          :key="index"
          :active="item.type == route.params.type"
          @click="switchBar(item)"
          >{{ item.label }}</UiTabItem
        >
      </UiTab>

      <CardList :data="data.data.rows" :title="`搜索${keyword}`" class="mt-4" />
    </div>
  </LoadingGroup>
</template>

<script setup>
const options = reactive([
  {
    index: 0,
    label: "课程",
    type: "course",
    isActive: true,
  },
  {
    index: 1,
    label: "专栏",
    type: "column",
    isActive: false,
  },
]);
const route = useRoute();

const keyword = ref(route.query.keyword || "");
const page = ref(route.params.page || 1);
const type = ref(route.params.type);

const switchBar = (item) => {
  console.log(`search-${item.type}-${page.value}`, keyword.value);
  navigateTo({
    name: `search-type-page`,
    params: {
      type: item.type,
      page: page.value,
    },
    query: {
      keyword: keyword.value,
    },
  });
};
definePageMeta({
  middleware: ["search"],
});

const { data, pending, error, refresh } = await useSearchApiData({
  type: type.value,
  page: page.value,
  limit: 10,
  keyword: keyword.value,
});
console.log(data.value.data.rows);
</script>
